<template>
    <div id="ad">
        <el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.type" placeholder="类型" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in typeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.status" placeholder="状态" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in statusList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="otOperation()">添加广告</el-button>
			</el-form-item>
		</el-form>

        <el-table :data="list" stripe v-loading="loading">
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    <p v-if="scope.row.type==1">PC端轮播图</p>
                    <p v-if="scope.row.type==2">登录图</p>
                    <p v-if="scope.row.type==3">注册图</p>
                    <p v-if="scope.row.type==4">忘记密码图</p>
                    <p v-if="scope.row.type==5">会员中心图</p>
                    <p v-if="scope.row.type==6">源码搭建二维码</p>
                    <p v-if="scope.row.type==7">移动端端轮播图</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="图片">
                <template slot-scope="scope">
                    <el-image fit="cover" :src="scope.row.image | fullPath" :preview-src-list="[$envConfig.serviceUrl + scope.row.image]" style="width:100px; height:100px">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="url" show-overflow-tooltip align="center" label="链接"></el-table-column>
            <el-table-column prop="sort" align="center" label="排序(倒序查询)"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注"></el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.status==1">启用</p>
                    <p v-if="scope.row.status==2">停用</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <p>{{$common.getDate(scope.row.create_time)}}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="otOperation(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteInfo(scope.row.id)" style="margin-left: 5px;margin-top: 5px;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="getList"
            :current-page.sync="params.pageNo"
		    :page-sizes="[10, 20, 50, 100]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
		</el-pagination>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            @close="closeDialog"
            width="600px"
            center>
            <div class="form">
                <div class="form-item">
                    <div class="label">类型：</div>
                    <div class="form-input">
                        <el-select v-model="form.type">
                            <el-option
                                v-for="item in typeList"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">图片：</div>
                    <div class="form-item">
                        <div class="form_image" @click="triggerImgHook" v-if="form.image==''">
                            <i class="el-icon-plus"></i>
                        </div>
                        <div class="img_wrap" v-if="form.image" @click="triggerImgHook">
                            <img :src="form.image | fullPath" alt="">
                        </div>
                        <input ref="imgHook" @change="changImg" type="file" style="display:none">
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">链接：</div>
                    <div class="form-input">
                        <el-input v-model="form.url"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">排序：</div>
                    <div class="form-input">
                        <el-input v-model="form.sort"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">备注：</div>
                    <div class="form-input">
                        <el-input v-model="form.remark"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">状态：</div>
                    <div class="form-input">
                        <el-select v-model="form.status">
                            <el-option
                                label="启用"
                                :value="1">
                            </el-option>
                            <el-option
                                label="停用"
                                :value="2">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            list: [],
            params: {
                pageNo: 1,
                pageSize: 10,
                isCount: true,
                type: '',
                status: '',
                tenantid:sessionStorage.getItem("tenantid")
            },
            form: {
                type: 1,
                image: '',
                url: '',
                sort: '',
                remark: '',
                status: 1
            },
            total: 100,
            typeList: [
                {
                    value: 1,
                    label: 'PC端轮播图（像素：宽1920*高400）'
                },
                {
                    value: 2,
                    label: '登录图（像素：宽1200*高600）'
                },
                {
                    value: 3,
                    label: '注册图（像素：宽1200*高600）'
                },
                {
                    value: 4,
                    label: '忘记密码图（像素：宽1200*高600）'
                },
                {
                    value: 5,
                    label: '会员中心图（像素：宽1200*高110）'
                },
                {
                    value: 6,
                    label: '源码搭建二维码（像素：宽564*高786）'
                },
                {
                    value: 7,
                    label: '移动端轮播图（像素：宽1440*高480）'
                }

            ],
            statusList: [
                {
                    value: 1,
                    label: '启用'
                },
                {
                    value: 2,
                    label: '停用'
                }
            ],
            id: '',
            loading: false,
            title: '新增',
            dialogVisible: false,
        }
    },
    created(){
        this.getList()
    },
    mounted(){},
    watch: {},
    methods: {
        handleSizeChange(e){
            this.params.pageSize = e
            this.params.isCount = true
            this.getList()
        },
        closeDialog(){
            this.id = ''
            this.form = {
                type: 1,
                image: '',
                url: '',
                sort: '',
                remark: '',
                status: 1
            }
        },
        submit(){
            if(this.form.image == ''){
                this.$message.warning('请上传图片')
                return
            }
            if(this.form.sort == ''){
                this.$message.warning('请填写排序')
                return
            }
            let id,remark,url
            if(this.form.remark){
                remark = this.form.remark
            }else{
                remark = undefined
            }
            if(this.form.url){
                url = this.form.url
            }else{
                url = undefined
            }
            if(this.id){
                id = this.id
            }else{
                id = undefined
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$request.post({
                url: '/ReportApi/tenant/Adupadteadd',
                params: {
                    tenantid:sessionStorage.getItem("tenantid"),
                    image: this.form.image,
                    sort: this.form.sort,
                    status: this.form.status,
                    type: this.form.type,
                    remark,
                    url,
                    id
                },
                success: res => {
                    this.$message.success('操作成功')
                    this.dialogVisible = false
                    this.getList()
                },
                finally: () => {
                    loading.close()
                }
            })
        },
        changImg(e){
            let file = e.target.files[0]
            if(file.size > 1024*1024*2){
                this.$message.error('图片大小不能超过2M')
                return
            }
            let reader = new FileReader()
            reader.onload = res => {
                this.form.image = reader.result
            }
            reader.readAsDataURL(file)
        },
        triggerImgHook(){
            this.$refs.imgHook.click()
        },
        otOperation(row){
            if(row){
                this.title = '修改'
                this.id = row.id
            }else{
                this.title = '新增'
                this.id = 'kk'
            }
            this.dialogVisible = true
            this.form = Object.assign({},this.form,row)
        },
        search(){
            this.params.isCount = true
            this.params.pageNo = 1
            this.getList()
        },
        deleteInfo(id){
            this.$confirm('此操作将永久删除该记录, 是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$request.post({
                    url: '/ReportApi/tenant/Addel',
                    params: {
                        id
                    },
                    success: res => {
                        this.$message.success('操作成功！')
                        this.getList()
                    },
                    finally: res => {
                        loading.close()
                    }
                })
            })
        },
        getList(){
            this.loading = true
            this.$request.post({
                url:'/ReportApi/tenant/Adlist',
                params: this.params,
                success: res => {
                    this.list = res[0]
                    if (this.params.isCount) {
                        this.params.isCount = false
                        this.total = res[1]
                    }
                },
                finally: () => {
                    this.loading = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#ad{
    .form{
        .form-item{
            display: flex;
            align-items: center;
            margin-top: 10px;
            .label{
                width: 100px;
                text-align: right;
                margin-right: 10px;
            }
            .form-input{
                width: 300px;
                .el-select{
                    width: 100%;
                }
            }
            .form_image{
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                i{
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                }
            }
            .img_wrap{
                width: 100px;
                height: 100px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .el-pagination{
        text-align: right;
        padding-top: 20px;
    }
}
</style>
